<template>
    <div class="userInfo" v-if="user.id">
        <top-bar :isBlack="true" title="通讯录"></top-bar>
        <img :src="user.avatar" alt="" class="portrait" />
        <p class="name">{{ user.name }}</p>
        <div class="info">
            <img class="info-icon" src="@/assets/icon_08.png" alt="" />
            <p>职位:{{ user.eu_job }}</p>
        </div>
        <div class="info">
            <img class="info-icon" src="@/assets/icon_15.png" alt="" />
            <p>电话:{{ user.phone }}</p>
        </div>
        <div class="info">
            <img class="info-icon" src="@/assets/icon_07.png" alt="" />
            <p>邮箱:{{ user.email }}</p>
        </div>
        <div class="communicate" @click="lianxi">发起会话</div>
        <div class="btn-wrapper">
            <van-button color="#224448" block @click="goMail">返回首页</van-button>
        </div>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
import wx from "weixin-js-sdk";
export default {
    name: "userInfo",
    data() {
        return {
            user: null,
        };
    },
    created() {
        this.user = JSON.parse(this.$route.query.user);
        this.jsConfig();
    },
    methods: {
        jsConfig() {
            let url = location.href.split("#")[0];
            this.$api
                .js_config({
                    url,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);
                    wx.config({
                        beta: data.beta, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                        debug: data.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，企业微信的corpID
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                        jsApiList: data.jsApiList, // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
                    });
                    wx.error(function(res) {
                        alert(JSON.stringify(res));
                        console.log("错误：" + JSON.stringify(res));
                    });
                    // wx.ready(function () {
                    //   wx.hideOptionMenu();
                    // });
                });
        },
        lianxi() {
            let _this = this;
            wx.ready(function() {
                wx.openEnterpriseChat({
                    // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
                    userIds: _this.user.userid, //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
                    externalUserIds: "", // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
                    groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
                    chatId: "", // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
                    success: function(res) {},
                    fail: function(res) {
                        if (res.errMsg.indexOf("function not exist") > -1) {
                            alert("版本过低请升级");
                        }
                    },
                });
            });
        },
        goMail() {
            this.$router.replace({
                path: "/mail",
            });
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.userInfo {
    .van-button {
        height: 54px;
    }
    .van-button--normal {
        font-size: 16px;
    }
}
</style>
<style lang="scss" scoped>
.userInfo {
    height: 100vh;
    z-index: 9;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding-bottom: 56px;

    .portrait {
        width: 87px;
        height: 87px;
        border-radius: 10px;
        display: block;
        margin: 23px auto 16px;
    }

    .name {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        padding-bottom: 20px;
        margin: 0 15px;
        border-bottom: 1px solid #f4f4f4;
    }

    .info {
        padding: 16px 15px 0;
        display: flex;
        align-items: center;
        .info-icon {
            width: 20px;
            margin-right: 15px;
        }

        p {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
        }
    }

    .communicate {
        width: 185px;
        height: 36px;
        background: #224448;
        border-radius: 5px;
        line-height: 36px;
        text-align: center;
        margin: 46px auto 0;
        font-size: 16px;
        color: #ffffff;
    }
    .btn-wrapper {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@media screen and (min-width: 750px) {
    .userInfo {
        width: 750px;
        left: 50%;
        transform: translateX(-50%);
        .name {
            font-size: 20px;
        }

        .info {
            p {
                font-size: 16px;
            }
        }
    }
}
</style>
